import React, { useState } from 'react';
import { X } from 'lucide-react';

interface OrgStructureModalProps {
  type: 'region' | 'team' | 'department';
  mode: 'add' | 'edit';
  data?: any;
  onClose: () => void;
  onSave: (data: any) => void;
}

const typeLabels = {
  region: '区域',
  team: '团队',
  department: '部门'
};

export default function OrgStructureModal({
  type,
  mode,
  data,
  onClose,
  onSave
}: OrgStructureModalProps) {
  const [formData, setFormData] = useState({
    name: data?.name || ''
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave({
      ...formData,
      id: data?.id
    });
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
      <div className="bg-white rounded-lg w-full max-w-md mx-4">
        <div className="flex items-center justify-between p-4 border-b">
          <h3 className="text-lg font-semibold text-gray-900">
            {mode === 'add' ? '添加' : '编辑'}{typeLabels[type]}
          </h3>
          <button onClick={onClose}>
            <X className="w-6 h-6 text-gray-500" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-4">
          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {typeLabels[type]}名称
            </label>
            <input
              type="text"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder={`请输入${typeLabels[type]}名称`}
              required
            />
          </div>

          <div className="flex justify-end space-x-3 mt-6">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg"
            >
              取消
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
            >
              确定
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}